<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商场</title>
    <link rel="stylesheet" href="../css/bootstrap.css" />
    <link rel="stylesheet" href="../css/shopping.css" />
    <script src="../js/jQuery3.7.1.js"></script>
    <script src="../js/bootstrap.js"></script>
  </head>
  <body>
    <div id="shopping">
      <div class="nav-img">
        <img src="../images/shopping/shopping-nav-img.png" alt="" />
      </div>
      <div class="nav">
        <ul class="nav nav-pills nav-justified">
          <li><a href="#dog">狗子</a></li>
          <li><a href="#cat">猫咪</a></li>
          <li><a href="#mouse">仓鼠</a></li>
          <li><a href="#rabbit">兔子</a></li>
          <li><a href="#fish">鱼</a></li>
          <li><a href="#bird">鸟</a></li>
        </ul>
      </div>
      <div class="main">
        <div class="main-imgs">
          <div
            id="carousel-example-generic"
            class="carousel slide"
            data-ride="carousel"
          >
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li
                data-target="#carousel-example-generic"
                data-slide-to="0"
                class="active"
              ></li>
              <li
                data-target="#carousel-example-generic"
                data-slide-to="1"
              ></li>
              <li
                data-target="#carousel-example-generic"
                data-slide-to="2"
              ></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
              <div class="item active">
                <img
                  src="../images/shopping/shlz1.png"
                  alt="..."
                  class="w-imgs"
                />
              </div>
              <div class="item w-imgs">
                <img
                  src="../images/shopping/shlz2.png"
                  alt="..."
                  class="w-imgs"
                />
              </div>
              <div class="item w-imgs">
                <img
                  src="../images/shopping/shlz3.png"
                  alt="..."
                  class="w-imgs"
                />
              </div>
            </div>

            <!-- Controls -->
            <a
              class="left carousel-control"
              href="#carousel-example-generic"
              role="button"
              data-slide="prev"
            >
              <span
                class="glyphicon glyphicon-chevron-left"
                aria-hidden="true"
              ></span>
              <span class="sr-only">向左</span>
            </a>
            <a
              class="right carousel-control"
              href="#carousel-example-generic"
              role="button"
              data-slide="next"
            >
              <span
                class="glyphicon glyphicon-chevron-right"
                aria-hidden="true"
              ></span>
              <span class="sr-only">向右</span>
            </a>
          </div>
        </div>

        <div class="use-things" id="dog">
          <h2>狗狗用品大全>></h2>
          <ul>
            <li>
              <img
                src="../images/宠物用品/狗/用品1.png"
                alt="法国皇家Royal Canin"
              />
              <h3>法国皇家Royal Canin</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/狗/用品2.png" alt="宝路Pedigree" />
              <h3>宝路Pedigree</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img
                src="../images/宠物用品/狗/无标题.png"
                alt="醇粹 大型犬成犬粮"
              />
              <h3>醇粹 大型犬成犬粮</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/狗/狗窝.png" alt="狗窝" />
              <h3>狗窝</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/狗/狗磨牙棒.png" alt="磨牙棒" />
              <h3>磨牙棒</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/狗/狗沙.png" alt="狗沙" />
              <h3>狗沙</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/狗/狗狗用品1.png" alt="go 狗粮" />
              <h3>go 狗粮</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/狗/狗狗用品4.png" alt="冠能 狗粮" />
              <h3>冠能 狗粮</h3>
              <h4>&yen;120</h4>
            </li>
          </ul>
        </div>

        <div class="use-things" id="cat">
          <h2>猫咪用品大全>></h2>
          <ul>
            <li>
              <img src="../images/宠物用品/猫/猫砂.png" alt="猫砂" />
              <h3>猫砂</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/猫/猫窝.png" alt="猫窝" />
              <h3>猫窝</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/猫/猫罐头.png" alt="猫罐头" />
              <h3>猫罐头</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/猫/猫咪用品1.png" alt="有鱼" />
              <h3>有鱼</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/猫/猫咪用品2.png" alt="比瑞吉" />
              <h3>比瑞吉</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/猫/猫咪用品3.png" alt="加拿大NOW" />
              <h3>加拿大NOW</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/猫/猫咪用品4.png" alt="both" />
              <h3>both</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/猫/猫咪用品分类1.png" alt="毛巾" />
              <h3>毛巾</h3>
              <h4>&yen;120</h4>
            </li>
          </ul>
        </div>

        <div class="use-things" id="mouse">
          <h2>仓鼠用品大全>></h2>
          <ul>
            <li>
              <img src="../images/宠物用品/仓鼠/仓鼠.png" alt="游乐场" />
              <h3>游乐场</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/仓鼠/仓鼠窝.png" alt="仓鼠窝" />
              <h3>仓鼠窝</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/仓鼠/仓鼠粮.png" alt="冻干" />
              <h3>冻干</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/仓鼠/仓鼠用品1.png" alt="零食" />
              <h3>零食</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/仓鼠/仓鼠用品2.png" alt="家" />
              <h3>家</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/仓鼠/仓鼠用品3.png" alt="磨牙石" />
              <h3>磨牙石</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/仓鼠/仓鼠用品4.png" alt="HAMATER" />
              <h3>HAMATER</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/仓鼠/仓鼠用品分类2.png" alt="奶酪" />
              <h3>奶酪</h3>
              <h4>&yen;120</h4>
            </li>
          </ul>
        </div>

        <div class="use-things" id="rabbit">
          <h2>兔子用品大全>></h2>
          <ul>
            <li>
              <img src="../images/宠物用品/兔子/兔化毛.png" alt="兔化毛" />
              <h3>兔化毛</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/兔子/兔油.png" alt="兔油" />
              <h3>兔油</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/兔子/兔粮.png" alt="兔粮" />
              <h3>兔粮</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/兔子/兔子用品1.png" alt="磨牙棒" />
              <h3>磨牙棒</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/兔子/兔子用品2.png" alt="wc" />
              <h3>wc</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/兔子/兔子用品3.png" alt="兔沙" />
              <h3>兔沙</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/兔子/兔子用品分类1.png" alt="HOME" />
              <h3>HOME</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img
                src="../images/宠物用品/兔子/兔子用品分类2.png"
                alt="纤维维护"
              />
              <h3>纤维维护</h3>
              <h4>&yen;120</h4>
            </li>
          </ul>
        </div>

        <div class="use-things" id="fish">
          <h2>鱼用品大全>></h2>
          <ul>
            <li>
              <img src="../images/宠物用品/鱼/鱼用品.png" alt="鱼缸" />
              <h3>鱼缸</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/鱼/鱼用品1.png" alt="鱼油" />
              <h3>鱼油</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/鱼/鱼用品2.png" alt="排水" />
              <h3>排水</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/鱼/鱼用品3.png" alt="装置" />
              <h3>装置</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/鱼/鱼用品分类2.png" alt="not 鱼粮" />
              <h3>not 鱼粮</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/鱼/鱼粮.png" alt="鱼粮" />
              <h3>鱼粮</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/鱼/金鱼.png" alt="过滤装置" />
              <h3>过滤装置</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/鱼/鱼.png" alt="鱼魔法总动员" />
              <h3>鱼魔法总动员</h3>
              <h4>&yen;120</h4>
            </li>
          </ul>
        </div>

        <div class="use-things">
          <h2>鸟用品大全>></h2>
          <ul>
            <li>
              <img src="../images/宠物用品/鸟/鸟笼.png" alt="鸟笼" />
              <h3>鸟笼</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/鸟/鸟粮.png" alt="鸟粮" />
              <h3>鸟粮</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/鸟/鸟零食.png" alt="零食" />
              <h3>零食</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/鸟/鸟用品1.png" alt="鸟架" />
              <h3>鸟架</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/鸟/鸟用品2.png" alt="秋千" />
              <h3>秋千</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/鸟/鸟用品3.png" alt="家" />
              <h3>家</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/鸟/鸟用品分类1.png" alt="藤球" />
              <h3>藤球</h3>
              <h4>&yen;120</h4>
            </li>
            <li>
              <img src="../images/宠物用品/鸟/鸟用品分类2.png" alt="跑轮" />
              <h3>跑轮</h3>
              <h4>&yen;120</h4>
            </li>
          </ul>
        </div>
      </div>
      <div class="footer">
        <img src="../images/shopping/footer.png" alt="">
        <p>祝您购物愉快！！！</p>
      </div>
    </div>
  </body>
</html>
